<template>
    <div>
        <van-nav-bar title="用户注册"></van-nav-bar>
        <img :src="imgUrlFourth" class="bgImg" alt="">
        <p class="goLogin" @click="loginClick">＜已有账号？去登录</p>
        <van-form @submit="onSubmit">
        <van-field
        v-model="form.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
        v-model="form.useremail"
        name="邮箱"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ required: true, message: '请填写邮箱地址' }]"
        />
        <van-field
        v-model="form.userpass"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码：八位以上"
        :rules="[{ required: true, message: '请填写密码' }]"
        />
         <van-field
        v-model="form.checkpass"
        type="password"
        name="重复密码"
        label="重复密码"
        placeholder="重复密码"
        :rules="[{ required: true, message: '请再次填写密码' }]"
        />
        <div class="check">
            <van-checkbox v-model="checked" checked-color="#07c160" shape="square" class="icon">
                我已详细阅读并同意
                <a href="###">用户协议</a>
            </van-checkbox>
        </div>
        <div class="submit">
            <van-button round block type="info" native-type="submit" :disabled="!checked">
                提交
            </van-button>
        </div>
</van-form>
    </div>
</template>
<script>
export default {
    name:'login',
    data() {
        return {
            form:{
            username:'',
            useremail: '',
            userpass: '',
            checkpass:''
            },
            imgUrlFourth:require("../../assets/register.png"),
            checked: false
        }
    },
    methods:{
        loginClick() {
            this.$router.push('/login').catch(err => err)
        },
        onSubmit() {
            let params = new URLSearchParams();
            params.append('name', this.form.username);
            params.append('email', this.form.useremail);
            params.append('password', this.form.userpass);
            params.append('password_confirmation', this.form.checkpass);
            params.append('user_agreement',this.checked);
            if(this.form.username==this.form.useremail){
                this.$notify({ type: 'warning', message: '用户名和密码不能相同' });
                this.form.username=""
                this.form.useremail=""
            }else{
                if(this.form.userpass==this.form.checkpass){
                    this.axios({
                        method: "post",
                        url: this.$store.state.url+"/auth/register",
                        data: params,
                    
                    }).then((res) => {
                        console.log(res);
                        if(res.data.data.code!= "00000"){
                            this.$notify({ type: 'warning', message: '您的邮箱已使用或注册出现错误，请重新输入' });
                        }else{
                            this.$router.push('/login');
                        }
                    }).catch((err) => {
                        if(err.response.status==422){
                            if(err.response.data.errors.email){
                                this.$notify({ type: 'warning', message: '您的邮箱已使用，请重新输入' });
                                this.form.useremail==""
                            }
                            if(err.response.data.errors.name){
                                this.$notify({ type: 'warning', message: '您的用户名已使用，请重新输入' });
                                this.form.username==""
                            }
                            if(err.response.data.errors.password){
                                this.$notify({ type: 'warning', message: '密码的最小的长度为八位' });
                                this.form.userpass==""
                                this.form.checkpass==""
                            }
                        }
                    })
                }else{
                    this.$notify({ type: 'warning', message: '两次密码不一致' });
                    this.form.userpass=""
                    this.form.checkpass=""
                }
            }
        },
        onClickLeft(){
            this.$router.push('/')
        }
    }
}
</script>
<style scoped>
 .van-nav-bar{
    z-index: 2000;
    font-size: 20px;
    border-right: 2px solid white;
    border-bottom: 1px solid rgb(223, 223, 223);
    height: 50px;
}
.check {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 12px;
}
.bgImg {
    width: 100%;
    height: 250px
}
.goLogin {
    float: left;
    font-size: 14px;
    padding: 5px;
    text-decoration: underline;
    color: blue
}
.icon {
    font-size: 12px
}
.submit {
    margin: 10px;
}
</style>